<template>
  <div class="component case-total-info">
    <el-alert :title="info" :closable="false" class="alert-style"> </el-alert>
  </div>
</template>
<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
@Component({
  components: {}
})
export default class CaseTotleInfo extends Vue {
  @Prop() private caseInfoData;

  private get info() {
    const totalAcount: any = this.caseInfoData.totalAcount || 0;
    const totalEntity: any = this.caseInfoData.totalEntity || 0;
    const totalOverdueAmount: any = this.caseInfoData.totalOverdueAmount || 0;
    const totalCaseMoney: any = this.caseInfoData.totalCaseMoney || 0;

    return `总计账户数：${totalAcount}，  总计实体数：${totalEntity}，  账户逾期总金额：${totalOverdueAmount}，  账户总金额：${totalCaseMoney}`;
  }
}
</script>
<style lang="less" scoped>
.component.case-total-info {
  .title-box {
    color: #606266;

    span {
      padding: 10px;
    }
  }
  .el-alert.alert-style {
    margin: 10px 0;
    background-color: rgb(236, 245, 255);
    color: rgb(64, 158, 255);
  }
}
</style>
